<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- 网页在浏览器上的图标 -->
    <link type="text/html" rel="icon" href="image/logo.png">
    <!-- 引入layui的css -->
    <link type="text/css" rel="stylesheet" href="lib/layui/css/layui.css">
    <!-- 引入layui的js -->
    <script src="lib/layui/layui.js"></script>
    <script src="lib/jquery-3.7.1.js"></script>
    <style>
        /* 引入外部字体，代码参考示例代码 */
        @font-face {
            font-family: "阿里妈妈数黑体 Bold";
            font-weight: 700;
            src: url("fonts/h19CoRX1LtmC.woff2") format("woff2"),
            url("fonts/h19CoRX1LtmC.woff") format("woff");
            font-display: swap;
        }
        body {
            margin: 0;
            padding: 0;
            background-color: #ecefff;
        }
        /* 使登录区域永远在中心点 */
        div.login-area {
            position: absolute;
            /* top、left是相对于body的偏移 */
            top: 50%;
            left: 50%;
            /* translate的偏移量是自身的宽/高的50% */
            transform: translate(-50%, -50%);
        }
        div.flex-column, p.flex-column {
            display: flex;
            /* 改变主轴是纵轴 */
            flex-direction: column;
            /* 交叉轴方向对齐：这里是横轴 */
            align-items: center;
            /* 主轴方向对齐：局中 */
            justify-content: center;
        }
        div.flex-row {
            display: flex;
            /* 交叉轴方向对齐：这里是纵轴 */
            align-items: center;
            /* 主轴方向对齐：局中 */
            justify-content: center;
        }
        div.flex-row>div.left {
            flex: 1;
        }
        div.flex-row>div.left>img {
            width: 120px;
        }
        div.flex-row>div.right {
            flex: 2;
        }
        div.flex-row>div.right>p {
            /* 前面的字体无效时，往后面找 */
            font-family: "阿里妈妈数黑体 Bold",serif;
            font-size: 40px;
            color: rgb(22, 134, 22);
            line-height: 60px;
            letter-spacing: 8px;
            /* 增大了字符左右间隔后，右外边距需要重新调整 */
            margin-right: -19px;
        }
        div.tabs {
            width: 360px;
            margin-top: 15px;
            background-color: #fff;
            border-radius: 12px;
            /* 隐藏圆角缺失的部分 */
            overflow: hidden;
        }
        div.tabs>div.flex-row {
            width: 360px;
        }
        div.tabs>div.flex-row>a {
            flex: 1;
            font-size: 18px;
            text-align: center;
            padding: 14px 0;
            background-color: #f5f5f6;
            /* 在layui的css中找到 */
            color: #777;
            cursor: pointer;
        }
        div.tabs>div.flex-row>a.checked {
            background-color: #fff;
            color: #000;
        }

        div.tabs>div.loginForm {
            /* 最后调整，根据元素最多的tab区域 */
            height: 236px;
            padding-top: 20px;
        }
        div.tabs>div.loginForm>img {
            width: 200px;
        }
        /* 设置p标签的高度，可以调节整体的位置 */
        div.tabs>div.loginForm>p {
            /* 最后计算，根据短信登录区域的最后一行元素div.rules */
            height: 34.4px;
        }
        div.tabs>div.loginForm>p>a {
            font-size: 13px;
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }
        div.tabs>div.loginForm input.loginInput {
            /* 避免获得焦点时，加上边框后区域变大 */
            box-sizing: border-box;
            width: 320px;
            height: 46px;
            margin-bottom: 16px;
            padding: 10px;
            font-size: 16px;
            color: #000;
            border-radius: 10px;
            background-color: rgba(39, 39, 41, 0.05);
            border: none;
            outline: none;
        }
        /* 伪类：获取焦点 */
        div.tabs>div.loginForm input.loginInput:focus {
            border: 1px solid #b4c1ff;
            background-color: #fff;
        }
        div.tabs>div.loginForm>button {
            width: 320px;
            height: 46px;
            border-radius: 10px;
            border: none;
            background: linear-gradient(0deg, #446dff 0%, rgba(99, 125, 255, 0.75) 100%);
            color: #fff;
            cursor: pointer;
            margin-bottom: 16px;
        }
        /* 禁用状态的样式 */
        div.tabs>div.loginForm>button.disabledBtn {
            opacity: 0.5;
            cursor: not-allowed;
        }
        div.tabs>div.loginForm>div.flex-row {
            width: 320px;
        }
        div.tabs>div.loginForm>div.flex-row>label {
            flex: 5;
        }
        div.tabs>div.loginForm>div.flex-row>label>input.loginInput {
            /* 父元素label的95%，label的宽度为320 * 5/7 */
            width: 95%;
        }
        div.tabs>div.loginForm>div.flex-row>button {
            flex: 2;
            height: 36px;
            margin-bottom: 16px;
            border: 1px solid #b4c1ff;
            border-radius: 5px;
            /*background-color: rgba(0, 0, 0, 0);*/
            /* 全透明 */
            background-color: transparent;
            color: #637dff;
            font-size: 14px;
            cursor: pointer;
        }
        div.tabs>div.loginForm>div.rules {
            display: flex;
            /* 复选框跟文字平齐，上边对齐 */
            align-items: start;
            width: 320px;
            font-size: 13px;
            color: rgba(37, 38, 43, 0.35);
        }
        div.tabs>div.loginForm>div.rules>p {

        }
        div.tabs>div.loginForm>div.rules>p>a {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }
        div.general-popups {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, 20%);
            width: 160px;
            color: #fff;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 5px 10px;
            box-sizing: border-box;
            border-radius: 5px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $('div.general-popups').text('').hide();
            clearInput();
            initTabs();
            verifyLoginBtn();
            initCheckBox();
            initGetCode();
        });

        /**
         * 给选项卡添加点击事件
         */
        function initTabs() {
            for (let i = 0; i < $('div.tabs>div.flex-row>a').length; i++) {
                // 给第i个选项卡添加点击事件
                $('div.tabs>div.flex-row>a:eq(' + i + ')').click(function(){
                    // 给第i个选项卡添加class:checked
                    $('div.tabs>div.flex-row>a').removeClass('checked')
                    $('div.tabs>div.flex-row>a:eq(' + i + ')').addClass('checked')

                    $('div.tabs div.loginForm').css('display', 'none');
                    $('div.tabs div.loginForm:eq(' + i + ')').css('display', 'flex');

                    clearInput();
                });
            }
        }

        /**
         * 切换tab时清除输入框、取消协议勾选、禁用短信登录的button
         */
        function clearInput() {
            $('#account').val('');
            $('#password').val('');
            $('#phone').val('');
            $('#code').val('');
            $('div.tabs>div.loginForm>div.rules input').prop('checked', false);
            $('div.tabs>div.loginForm>button:eq(1)')
                .addClass('disabledBtn')
                .attr('disabled', true);
        }

        function initGetCode() {
            $('div.tabs>div.loginForm>div>button').click(function() {
                // 先校验手机号
                let phone = $('#phone').val();
                // 使用正则表达式校验
                if (!/^1[3-9]\d{9}$/.test(phone)) {
                    showGeneralPopups('请输入正确的手机号', 2000);
                    return;
                }
                /*
                 1、改变button的内容为：60s后重发
                 2、开始计时，从60~0
                 3、设置button为禁用点击
                 4、设置手机号输入框为只读，设置属性readonly='true'
                 */
                $('#phone').attr('readonly', true);
                let time = 60;
                $('div.tabs>div.loginForm>div>button')
                    .text(time + 's后重发').attr('disabled', true);
                time--;
                // 周期性函数是一个异步的操作
                let interval = setInterval(function() {
                    $('div.tabs>div.loginForm>div>button')
                        .text(time + 's后重发');
                    time--;
                    if (time < 0) {
                        // 取消读秒
                        clearInterval(interval);
                        $('#phone').removeAttr('readonly');
                        $('div.tabs>div.loginForm>div>button')
                            .text('获取验证码').removeAttr('disabled');
                    }
                }, 1000);
            });
        }

        function verifyLoginBtn() {
            // 给账号登录的button绑定点击事件
            $('div.tabs>div.loginForm>button:eq(0)').click(function() {
                // 账号、密码是否为空
                let account = $('#account').val();
                if (!account.trim()) {
                    showGeneralPopups('请输入手机号/账号', 2000);
                    return;
                }
                let password = $('#password').val();
                if (!password.trim()) {
                    showGeneralPopups('请输入密码', 2000);
                    return;
                }
                window.location.href = 'home.html';
            });
            // 给短信登录的button绑定点击事件
            $('div.tabs>div.loginForm>button:eq(1)').click(function() {
                // 手机号、验证码是否为空
                let phone = $('#phone').val();
                if (!phone.trim()) {
                    showGeneralPopups('请输入手机号', 2000);
                    return;
                }
                let code = $('#code').val();
                if (!code.trim()) {
                    showGeneralPopups('请输入验证码', 2000);
                    return;
                }
                window.location.href = 'home.html';
            });
        }

        function initCheckBox() {
            $('div.tabs>div.loginForm>button:eq(1)')
                .addClass('disabledBtn')
                .attr('disabled', true);
            $('div.tabs>div.loginForm>div.rules input').click(function() {
                if ($(this).is(':checked')) {
                    // 移除短信登录button的class：disabledBtn
                    // 设置禁用点击，通过元素的disabled属性
                    $('div.tabs>div.loginForm>button:eq(1)').removeClass('disabledBtn').removeAttr('disabled');
                } else {
                    // 添加短信登录button的class：disabledBtn
                    // 禁用点击
                    $('div.tabs>div.loginForm>button:eq(1)').addClass('disabledBtn').attr('disabled', true);
                }
            });
        }

        /**
         * 切换到短信登录
         */
        function toPhoneLogin() {
            // click()，里面写函数是在绑定函数
            // click()，不写参数是在触发点击
            $('div.tabs a.loginType:eq(2)').click();
        }

        /**
         * 封装通用的弹出层方法
         * @param message 弹出层信息
         * @param keepTime 保留时间，毫秒数
         */
        function showGeneralPopups(message, keepTime) {
            $('div.general-popups').text(message).show();
            setTimeout(function(){
                $('div.general-popups').text('').hide();
            }, keepTime);
        }
    </script>
</head>
<body>
    <div class="flex-column login-area" style="width: 360px;">
        <!-- 头部区域：logo、标题 -->
        <div class="flex-row" style="width: 360px;">
            <div class="left">
                <img src="image/logo.png" alt="logo">
            </div>
            <div class="right">
                <p class="flex-column">
                    <span>校园一卡通</span>
                    <span>管理系统</span>
                </p>
            </div>
        </div>

        <!-- tabs区域 -->
        <div class="tabs flex-column">
            <!-- 选项卡 -->
            <div class="flex-row">
                <a class="loginType checked">扫码登录</a>
                <a class="loginType">账号登录</a>
                <a class="loginType">短信登录</a>
            </div>

            <!-- 内容 -->
            <!-- 扫码登录 -->
            <div class="loginForm flex-column" style="height: 216px; padding-bottom: 20px">
                <img src="image/scanLogin.svg" alt="二维码">
                <p>
                    <a href="javascript:void($('div.tabs a.loginType:eq(2)').click())">还没有账号？去注册一个</a>
                </p>
            </div>

            <!-- 账号登录 -->
            <div class="loginForm flex-column" style="display: none">
                <label>
                    <input id="account" class="loginInput" type="text" placeholder="请输入账号/手机号">
                </label>
                <label>
                    <input id="password" class="loginInput" type="password" placeholder="请输入密码">
                </label>
                <button type="button">登录</button>
                <p>
                    <a onclick="toPhoneLogin()">还没有账号？去注册一个</a>
                </p>
            </div>

            <div class="loginForm flex-column" style="display: none">
                <label>
                    <input id="phone" class="loginInput" type="text" placeholder="请输入手机号">
                </label>
                <div class="flex-row">
                    <label>
                        <input id="code" class="loginInput" type="text" placeholder="验证码">
                    </label>
                    <button type="button">获取验证码</button>
                </div>
                <button type="button" class="disabledBtn">登录</button>
                <div class="rules">
                    <label>
                        <input type="checkbox" style="margin: 3px 3px 3px 4px">
                    </label>
                    <p>
                        未注册手机登录时会自动创建新账户,我已阅读并同意
                        <a>服务协议</a> 和 <a>隐私条款</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="general-popups">请输入手机号/账号</div>
</body>
</html>